<template>
  <div>
    <div>
      <!-- 容器盒子 -->
      <el-container>
        <!-- 首页头部 -->
        <el-header>
          <div class="index_logo">
            <router-link :to="{ path: '/' }">
              <img
                src="../assets/image/index/llogo.png"
                width="300px"
                height="60px"
                alt="背景图,首页背景图"
              />
            </router-link>
          </div>
          <div class="index_welcome fr">
            <span>欢迎您,管理员</span>
            <span class="index_admin">{{ user.account }}</span>
            <span @click="loginout"
              ><i class="el-icon-switch-button"></i>
            </span>
          </div>
        </el-header>
        <el-container>
          <!-- 左侧导航栏 -->
          <el-aside width="243px">
            <!-- <div class="ss_btn"><i class="el-icon-s-operation" @click="changeNav"></i></div> -->
            <div class="index_user">
              <div class="user_head">
                <div class="head_img"><i class="el-icon-user-solid"></i></div>
                <span class="user_name">{{ user.name }}</span>
              </div>
              <div class="user_operation">
                <span class="account_mgr">
                  <i class="el-icon-user"></i>
                  <el-link
                    :underline="false"
                    :disabled="menusp.length < 2"
                    @click="changeUser(101)"
                    >用户中心</el-link
                  >
                </span>
                <span>|</span>
                <span class="account_mgr">
                  <i class="el-icon-s-shop"></i>
                  <el-link
                    :underline="false"
                    :disabled="menusp.length < 2"
                    @click="changeUser(102)"
                    >日志查看</el-link
                  >
                </span>
                <div class="line"></div>
                <span class="account_mgr">
                  <i class="el-icon-box"></i>
                  <el-link
                    :underline="false"
                    :disabled="true"
                    @click="changeUser(3)"
                    >盘存管理</el-link
                  >
                </span>
                <span>|</span>
                <span class="account_mgr">
                  <i class="el-icon-edit-outline"></i>
                  <el-link
                    :underline="false"
                    :disabled="menusp.length < 2"
                    @click="changeUser(203)"
                    >统计报表</el-link
                  >
                </span>
              </div>
            </div>
            <div class="index_operaName">
              操作管理
            </div>
            <div class="index_leftNav">
              <el-menu
                @select="changeRoute"
                active-text-color="#000"
                :collapse="flag"
              >
                <template v-for="item in menusp">
                  <!--如果有children节点就进入if-->
                  <!-- <el-submenu
                    :key="index"
                    :index="item.auth_level"
                  > -->
                  <!-- <template slot="title">
                      <i class="el-icon-location"></i>
                      <span>{{ item.children.auth_name }}</span>
                    </template> -->
                  <el-menu-item
                    v-show="item.auth_level != 1"
                    v-for="subItem in item.children"
                    :index="subItem.auth_level"
                    :key="subItem.auth_level"
                    @click="updateArrow(item, subItem)"
                    :class="{ select: selectIndex == item.index }"
                  >
                    {{ subItem.auth_name }}
                  </el-menu-item>
                  <!-- </el-submenu> -->
                  <!--如果没有children说明没有子节点，所以进入else-->
                  <!-- <el-menu-item :key="index" :index="item.auth_level">
                    <i class="el-icon-setting"></i>
                    <span slot="title">{{ item.auth_name }}</span>
                  </el-menu-item> -->
                </template>
              </el-menu>
              <!-- <ul v-for="(item, index) in leftNav" :key="index">
                <li
                  @click="changeRoute(item.index)"
                  :class="{ select: selectIndex == item.index }"
                >
                  <i class="el-icon-s-operation"></i>
                  <a href="javascript:;">
                    {{ item.name }}
                  </a>
                </li>
              </ul> -->
            </div>
          </el-aside>
          <!-- 主内容 -->
          <el-main id="el-main" ref="el-main">
            <div class="arrow" v-show="menu.length > 0" id="top">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item
                  :to="{ path: '/' }"
                  @click.native="saveMenu([])"
                  >首页</el-breadcrumb-item
                >
                <el-breadcrumb-item
                  v-for="(item, index) in menu"
                  :key="index"
                  >{{ item }}</el-breadcrumb-item
                >
              </el-breadcrumb>
            </div>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
import http from '@/utils/httpUtil'
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      action: {
        menu: 'ssmService/menu/selectMyMenu',
        loginout: 'ssmService/user/loginout'
      },
      flag: false,
      selectIndex: 0,
      // 左侧导航栏
      leftNav: [
        {
          index: 1,
          name: '租出管理'
        },
        {
          index: 2,
          name: '购入管理'
        },
        {
          index: 3,
          name: '库存管理'
        },
        {
          index: 4,
          name: '花卉信息'
        },
        {
          index: 5,
          name: '分类查看'
        },
        {
          index: 6,
          name: '客户管理'
        }
      ],
      gettime: '',
      isCollapse: true,
      menusp: []
    }
  },
  components: {},
  methods: {
    // changeRoute (index) {
    //   this.selectIndex = index
    //   if (index === 1) {
    //     this.$router.push('/leave')
    //   }
    //   if (index === 2) {
    //     this.$router.push('/rent')
    //   }
    //   if (index === 3) {
    //     this.$router.push('/inventory')
    //   }
    //   if (index === 4) {
    //     this.$router.push('/flower')
    //   }
    //   if (index === 5) {
    //     this.$router.push('/classify')
    //   }
    //   if (index === 6) {
    //     this.$router.push('/client')
    //   }
    //   if (index === 7) {
    //     this.$router.push('/userMgr')
    //   }
    //   if (index === 8) {
    //     this.$router.push('/')
    //   }
    //   if (index === 9) {
    //     this.$router.push('/login')
    //     this.selectIndex = -1
    //   }
    // },
    ...mapMutations(['saveLoginInfo', 'changeLoginState']),
    changeNav () {
      alert(1)
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    changeUser (index) {
      if (index === 1) {
        this.$router.push('/')
      }
      if (index === 102) {
        this.$router.push('/log')
      }
      if (index === 101) {
        this.$router.push('/userMgr')
      }
      if (index === 203) {
        this.$router.push('/inventory')
      }
    },
    // 保存menu
    ...mapMutations(['saveMenu']),
    // 获取登录用户自己的权限菜单
    getMyMenus () {
      http.xhrGet(this, this.action.menu, null, res => {
        // console.log(res)
        let parMenu = res.data.menu_1
        let subMenu = res.data.menu_2
        let newMenu = []
        parMenu.forEach((obj, index) => {
          let subArry = []
          subMenu.forEach((subObj, subIndex) => {
            // eslint-disable-next-line eqeqeq
            if (subObj.parent_level == obj.auth_id) {
              subArry.push(subObj)
            }
          })
          if (subArry.length > 0) {
            obj['children'] = subArry
            // console.log(subArry)
          }
          // console.log(obj)
          newMenu.push(obj)
        })
        // console.log(newMenu)
        // console.log(this.menusp)
        this.menusp = newMenu
        // console.log(this.menusp)
        // console.log(this.menusp.length)
      })
    },
    changeRoute (index) {
      this.selectIndex = index
      // console.log(index)
      let map = new Map()
      map.set('1', '/main')
      map.set('101', '/userMgr')
      map.set('102', '/log')
      map.set('103', '/operaLog')
      map.set('201', '/leave')
      map.set('202', '/rent')
      map.set('203', '/inventory')
      map.set('204', '/flower')
      map.set('205', '/classify')
      map.set('206', '/client')
      let routeUrl = map.get(index)

      this.$router.push(routeUrl)
    },
    updateArrow (parMenu, subMenu) {
      let menuNameArr = []
      menuNameArr[0] = parMenu.auth_name
      menuNameArr[1] = subMenu.auth_name
      this.saveMenu(menuNameArr)
    },
    loginout () {
      http.xhrPost(this, this.action.loginout, null, res => {
        this.changeLoginState(0)
        this.$message({
          type: 'success',
          message: '注销成功,即将跳转页面',
          duration: 1000
        })
      })
      // console.log(param)
      this.$router.push('/login')
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'user', 'menu'])
  },
  mounted () {
    if (!this.isLogin) {
      this.$message({
        type: 'error',
        message: '您还没有登录，请先登录'
      })
      this.$router.push('/login')
    } else {
      this.getMyMenus()
    }
  }
}
</script>

<style scope>
@import "../assets/css/reset.css";
@import "../assets/css/index.css";
</style>
